<template>
	<view>
		<uni-popup ref="popup" type="center">
			<view class="centonse flex-column">
				<view class="centonse-top">
					<image v-if="obj&&obj.image" :src="$utils.cdnImg(obj.image)" mode="scaleToFill" class="tupian"></image>
					<view class="guige">选择规格</view>
					<view class="cethens flex-row flex-content-start flex-wrap">
						<view v-for="(item,index) in attrList">
							<view :class="index==selected?`ones-selected`:`ones`" @tap="xz(index)">{{item.title}}</view>
							
						</view>
					</view>
					<view class="shuliang">选择数量</view>
					<view class="flex-row shul flex-content-center">
						<image @tap="jan" src="../static/order/jian-ac.png" mode="scaleToFill"></image>
						<view class="inputs"><input type="text" v-model="num"/></view>
						<image @tap="jia" src="../static/order/jia.png" mode="scaleToFill"></image>
					</view>
					<view class="buttons flex-row flex-content-between">
						<view @tap="close">取消</view>
						<view @tap="qr">确认</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"attr",
		props:{
			attrList:{
				type:Array,
				default:[]
			},
			// confirm:{
			// 	type:Function,
			// 	default:null
			// }
		},
		data() {
			return {
				selected:0,
				num:1,
				maxNum:10,
				obj:null
			};
		},
		watch:{
			attrList(newvalue,oldValue){
				this.num = 1;
				this.selected = 0;
				this.obj = newvalue[this.selected]
			}
		},
		created() {
			this.obj = this.attrList[0]
		},
		methods:{
			open(){
				this.$refs.popup.open();
			},
			close(){
				this.$refs.popup.close();
			},
			xz(index){
				this.selected = index
				this.obj = this.attrList[this.selected]
				// console.log(this.obj);
			},
			//减数量
			jan(){
				let num = this.num
				if(num>1){
					num--
					this.num = num
				}
				
			},
			jia(){
				let num = this.num;
				num++;
				// this.num = num
				if(this.obj.inventory!=-1){
					if(parseInt(num)>this.obj.inventory){
						this.num = this.obj.inventory
					}else{
						this.num = num;
					}
				}else{
					this.num = num;
				}
				
				
			},
			qr(){
				let data = {
					data:this.obj,
					num:this.num
				}
				this.$emit("confirm",data)
				this.close();
			}
		}
	}
</script>

<style lang="scss">
	.tupian{
		width: 140rpx;
		height: 140rpx;
	}
	.inputs{
		>input{
			width: 120rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
		}
	}
	.buttons{
		margin-left: 13rpx;
		margin-right: 13rpx;
		margin-top: 88rpx;
		>view:nth-child(1){
			width: 220rpx;
			height: 70rpx;
			background: #FFFFFF;
			border-radius: 35rpx 35rpx 35rpx 35rpx;
			opacity: 1;
			border: 1rpx solid #69D330;
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #69D330;
			text-align: center;
			line-height: 70rpx;
			
		}
		>view:nth-child(2){
			width: 220rpx;
			height: 70rpx;
			background: linear-gradient(90deg, #71DA38 0%, #50BC16 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			opacity: 1;
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 70rpx;
		}
	}
	.shul{
		margin-top: 34rpx;
		>image{
			width: 60rpx;
			height: 60rpx;
		}
		>view{
			width: 120rpx;
			height: 60rpx;
			background: #F3F3F3;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			margin-left: 30rpx;
			margin-right: 30rpx;
		}
	}
	.shuliang{
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 60rpx;
	}
	.ones-selected{
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		border: 1rpx solid #69D330;
		color: #69D330;
		// margin-right: 20rpx;
		padding: 15rpx 40rpx 15rpx 40rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.ones{
		background: #F2F2F2;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		// margin-right: 20rpx;
		padding: 20rpx 45rpx 20rpx 45rpx;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
	}
	.cethens{
		width: 508rpx;
		margin-top: 24rpx;
	}
	.guige{
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 15rpx;
	}
	.centonse{
		width: 600rpx;
		// height: 600rpx;
		background: #FFFFFF;
		box-shadow: 0px 1rpx 9rpx 1rpx rgba(209,209,209,0.5);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		border: 1rpx solid #E9E9E9;
		padding-bottom: 58rpx;
	}
	.centonse-top{
		padding-top: 50rpx;
		margin-left: 47rpx;
		margin-right: 45rpx;
	}
</style>